/*
* 绑定设备弹框
* */

import React, { Component } from 'react';
import {
    Input, Form, Select, Modal, Button, Progress, Upload, message, Tooltip, Icon, Table,
    Card, Row, Col, DatePicker, Popconfirm, Radio, Divider
} from 'antd';
import { Util, dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import ReadCard from 'components/readcard/ReadCard';
// import { PlusOutlined } from '@ant-design/icons';
import '../style/index.less';
import moment from 'moment';

const Option = Select.Option;
const Search = Input.Search;
const FormItem = Form.Item;
const { TextArea } = Input;

class ShowInformationModal extends Component {

    constructor(props) {
        super(props);
        var date = new Date();
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        this.state = {
            leftData: [],
            rightData: [],
            userData: userData,
            total: 0,
            page: 1,
            pageSize: 10,
            codePage: 1,
            ids: [],
            totalCount: 0,
            fileList: [],
            dataSource: [],
            family: [{}],
        }
    }
    componentWillReceiveProps(nextProp) {
        if (nextProp.isShow === true) {
            // this.loadData()
            this.loadCompanyData()
            this.setState({
                deviceTypeID: nextProp.deviceTypeID,
                deviceModelID: nextProp.deviceModelID,
                companyID: nextProp.companyID,
                SN: nextProp.SN,
            })
        } else if (this.props.isShow === false) {
            this.cleanInput();
        }
    }

    componentDidMount() {
        this.props.onRef(this)
        this.loadCardType();
    }

    loadAllData() {
        this.loadData()
        this.loadCompanyData()
        this.loadEquipmentType()
        this.loadEquipmentNum()
    }

    loadClearData() {
        this.setState({
            patID: undefined
        })
    }

    loadData() {
        var params = {
            params: [{
                patID: this.props.patID ? this.props.patID : '',
                cardTypeID: this.state.patCardTypeID ? this.state.patCardTypeID : (this.state.cardStatus),
                cardNo: this.state.patCardNo,
                number: this.state.number,
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070140",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        titleData: !Util.isEmpty(res.result) ? res.result[0] : {},
                        patID: !Util.isEmpty(res.result) && !Util.isEmpty(res.result[0]) ? res.result[0].patID : ''
                    })
                } else {
                    this.setState({
                        titleData: {}
                    })
                }
            }
        });
    }

    //获取卡类型
    loadCardType() {
        var params = {
            params: [{
                cardTypeFlag: '1',//卡类型
            }]
        }
        $http.post('urlDeault', this, {
            code: "03030005",
            data: params,
            success: function (res) {
                var cardStatus = undefined, replaceZero = '', cardLength = '', readMode = ''
                if (res.errorCode == '0') {
                    if (res.cardType && res.cardType.length > 0) {
                        var cardType = res.cardType;
                        for (var i = 0; i < cardType.length; i++) {
                            if (cardType[i].defaultFlag == 'Y') {
                                cardStatus = cardType[i].id,
                                    replaceZero = cardType[i].replenishZero
                                cardLength = cardType[i].cardLength
                                readMode = cardType[i].readMode
                            }
                        }
                    }
                    this.setState({
                        cardTypeData: res.cardType,
                        cardStatus: cardStatus,
                        readMode: readMode,
                        cardLength: cardLength,
                        replaceZero: replaceZero,
                    })
                }
            }
        });
    }

    closeModal() {
        let { onHide } = this.props;
        onHide && onHide();
        this.cleanInput();
    }

    //清空输入框
    cleanInput() {
        this.setState({
            deviceTypeID: undefined,
            deviceModelID: undefined,
            companyID: undefined,
            SN: undefined,
            editStatus: false,
            equipmentMsg: [],
            equipmentNumMsg: [],
            companyMsg: [],
            number: undefined,
            patCardTypeID: undefined,
            titleData: ''
        })
    }

    loadCompanyData() {
        var params = {
            params: [{}]
        }
        $http.post('urlS', this, {
            code: "03070128",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        companyMsg: res.result
                    })
                }
            }
        })
    }

    changeSelectCompany(name, e) {
        this.setState({
            [name]: e,
            equipmentMsg: [],
            equipmentNumMsg: [],
            deviceTypeID: undefined,
            deviceModelID: undefined
        }, () => {
            this.loadEquipmentType()//获取设备类型
        })
    }

    loadEquipmentType() {
        var params = {
            params: [{
                companyID: this.state.companyID
            }]
        }
        $http.post('urlS', this, {
            code: "03070129",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        equipmentMsg: res.result
                    })
                }
            }
        })
    }

    changeSelectDeviceType(name, e) {
        this.setState({
            [name]: e,
            equipmentNumMsg: [],
            deviceModelID: undefined
        }, () => {
            this.loadEquipmentNum()//获取设备型号
        })
    }

    loadEquipmentNum() {
        var params = {
            params: [{
                companyID: this.state.companyID,
                deviceTypeID: this.state.deviceTypeID,
            }]
        }
        $http.post('urlS', this, {
            code: "03070130",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        equipmentNumMsg: res.result
                    })
                }
            }
        })
    }


    handleReadCard() {
        var cardType = this.state.patCardTypeID ? this.state.patCardTypeID : (this.state.cardStatus);
        this.readCard.ReadCard(cardType, "R", (json) => {
            this.setState({ readPatID: json && json.patInfo ? json.patInfo.patID : '', patCardNo: json.cardNo, readStatus: 'read' }, () => {
                this.loadData()
            })
        })
    }

    loadKeyDown(e) {
        if (e.keyCode == '13') {
            this.setState({//自动补0，渲染到组件中
                patCardNo: this.state.replaceZero == 'Y' ? (Array(parseInt(this.state.cardLength)).join(0) + this.state.patCardNo).slice(-parseInt(this.state.cardLength)) : this.state.patCardNo
            }, () => {
                this.loadData(1)
            })
        }
    }

    //切换卡类型
    changeCardType(name, e) {
        var { cardTypeData } = this.state;
        for (var i = 0; i < cardTypeData.length; i++) {
            if (e == cardTypeData[i].id) {
                this.setState({
                    cardLength: cardTypeData[i].cardLength,
                    replaceZero: cardTypeData[i].replenishZero,
                    cardTypeId: cardTypeData[i].id,
                    readMode: cardTypeData[i].readMode,
                    [name]: e,
                    inputStatus: true
                })
            }
        }
    }

    searchPatientMsg(e) {
        if (e.keyCode == '13') {
            this.loadData(1)
        }
    }

    onSubmit() {
        if (Util.isEmpty(this.state.patID)) {
            message.error('病人信息不能为空')
            return
        }
        if (Util.isEmpty(this.state.deviceTypeID)) {
            message.error('设备类型不能为空')
            return
        }
        if (Util.isEmpty(this.state.companyID)) {
            message.error('设备厂商不能为空')
            return
        }
        if (Util.isEmpty(this.state.deviceModelID)) {
            message.error('设备型号不能为空')
            return
        }
        if (Util.isEmpty(this.state.SN)) {
            message.error('设备编码不能为空')
            return
        }
        var params = {
            patID: this.state.patID,
            deviceModelID: this.state.deviceModelID,
            SN: this.state.SN,
            hospID: this.state.userData.hospID,
            userID: this.state.userData.userID
        }
        var { onSubmit } = this.props;
        onSubmit && onSubmit(params)
    }

    render() {
        //卡类型
        let cardTypeOption = []
        this.state.cardTypeData && this.state.cardTypeData.map((item, index) => {
            cardTypeOption.push(<Option key={index} value={item.id}>
                <Tooltip title={this.state.userData.language == 'EN' ? item.enDescripts : item.descripts}>
                    {this.state.userData.language == 'EN' ? item.enDescripts : item.descripts}</Tooltip></Option>)
        })

        //设备厂商
        var companyMsgOption = []
        this.state.companyMsg && this.state.companyMsg.map((item, index) => {
            companyMsgOption.push(<Option key={index} value={String(item.id)} code={item.code} name={item.descriptsSPCode}>{item.descripts}</Option>)
        })
        //设备类型
        var equipmentMsgOption = []
        this.state.equipmentMsg && this.state.equipmentMsg.map((item, index) => {
            equipmentMsgOption.push(<Option key={index} value={String(item.id)} code={item.code} name={item.descriptsSPCode}>{item.descripts}</Option>)
        })
        //设备型号
        var equipmentNumMsgOption = []
        this.state.equipmentNumMsg && this.state.equipmentNumMsg.map((item, index) => {
            equipmentNumMsgOption.push(<Option key={index} value={String(item.id)} code={item.code} name={item.descriptsSPCode}>{item.descripts}</Option>)
        })

        //所属医院参数
        let hospitalOption = [];
        this.props.hospitalData && this.props.hospitalData.map((item, index) => {
            hospitalOption.push(<Option key={index} value={item.id} name={item.descripts} code={item.descriptsSPCode}>{item.descripts}</Option>)
        })

        return <div>
            {/**读卡 */}
            <ReadCard ref={ref => this.readCard = ref}></ReadCard>
            <Modal className='show-bindDevice-modal'
                title={'绑定设备'}
                maskClosable={false}
                visible={this.props.isShow}
                onCancel={this.closeModal.bind(this)}
                onOk={this.onSubmit.bind(this)}>
                <Card title={<span><span className='imformation-label-left'></span>查找患者</span>}>
                    <Row>
                        <Col span={12}>
                            <Select style={{ width: '100px' }} placeholder='请选择卡类型'
                                allowClear
                                showSearch disabled={!Util.isEmpty(this.state.patID) && this.props.editStatus == true}
                                value={this.state.patCardTypeID ? this.state.patCardTypeID : (this.state.cardStatus)}
                                getPopupContainer={triggerNode => triggerNode.parentNode}
                                onChange={this.changeCardType.bind(this, 'patCardTypeID')}>
                                {cardTypeOption}
                            </Select>
                            <Search
                                placeholder={'请输入卡号'} style={{ width: '250px', marginLeft: 10 }}
                                onChange={Util.commonInputChange.bind(this, 'patCardNo')}
                                value={this.state.patCardNo}
                                enterButton={'读卡'} disabled={!Util.isEmpty(this.state.patID) && this.props.editStatus == true}
                                readOnly={this.state.readMode == 'R' ? true : false}
                                onPressEnter={(e) => console.dir(e)}
                                onKeyDown={this.loadKeyDown.bind(this)}
                                onSearch={this.handleReadCard.bind(this)}
                            />
                        </Col>

                        <Col span={10}>
                            人员标识：<Input onChange={Util.commonInputChange.bind(this, 'number')}
                                disabled={!Util.isEmpty(this.state.patID) && this.props.editStatus == true}
                                onKeyDown={this.searchPatientMsg.bind(this)} value={this.state.number}
                                placeholder={'病人ID/身份证号码'} style={{ width: '70%' }} />
                        </Col>
                    </Row>
                </Card>

                <Card style={{ marginTop: 5 }} title={<span><span className='imformation-label-left'></span>人员信息</span>}>
                    <div style={{ width: '100%', display: 'flex', float: 'left' }}>
                        <div className={this.state.titleData && this.state.titleData.patSexCode == '1' ?
                            'splice-boy' : (this.state.titleData && this.state.titleData.patSexCode == '2' ? 'splice-girl' : 'splice-other')}></div>
                        <div style={{ height: 79, borderRight: '1px solid #EEEEEE' }}></div>
                        {!Util.isEmpty(this.state.titleData) ? <div>
                            <div style={{ padding: '0px 0 0 20px' }}>
                                <span style={{ color: '#333333', fontWeight: 'bold', cursor: 'pointer', fontSize: '16px' }}>
                                    {this.state.titleData ? this.state.titleData.patName || '--' : '--'}</span><Divider type="vertical" />
                                <span>{this.state.titleData ? this.state.titleData.patSexDesc || '--' : '--'}</span><Divider type="vertical" />
                                <span>{this.state.titleData ? this.state.titleData.patAge || '--' : '--'}</span><Divider type="vertical" />
                                <span>{this.state.titleData ? this.state.titleData.patNo || '--' : '--'}</span><Divider type="vertical" />
                                <span>{this.state.titleData ? this.state.titleData.payType || '--' : '--'}</span><Divider type="vertical" />
                                <span>{this.state.titleData ? this.state.titleData.patMobile || '--' : '--'}</span>
                            </div>
                            <div style={{
                                fontWeight: 400, color: '#666666', padding: '5px 0 0 20px', width: '65vh', overflow: 'hidden',
                                textOverflow: 'ellipsis', whiteSpace: 'nowrap'
                            }}>
                                <Tooltip title={this.state.titleData ? this.state.titleData.presentAddress : ''}>
                                    <span style={{ fontWeight: 'bold', color: '#333333' }}>现住址：{this.state.titleData ? this.state.titleData.presentAddress || '--' : '--'}</span>
                                </Tooltip>
                            </div>

                            <div style={{ fontWeight: 400, color: '#666666', padding: '5px 0 0 20px', display: 'flex' }}>
                                <div style={{ fontWeight: 'bold', color: '#333333' }}>签约医生：{this.state.titleData ? this.state.titleData.docDesc || '--' : '--'}</div>
                                {this.state.titleData && !Util.isEmpty(this.state.titleData.signing) ?
                                    <div className='sign-style' style={{ background: '#f5222d' }}>签约</div> : null}

                                {this.state.titleData && !Util.isEmpty(this.state.titleData.hypertension) ?
                                    <div className='signs-style' style={{ background: '#fa541c' }}>高</div> : null}

                                {this.state.titleData && !Util.isEmpty(this.state.titleData.diabetes) ?
                                    <div className='signs-style' style={{ background: '#d4b106' }}>糖</div> : null}

                                {this.state.titleData && !Util.isEmpty(this.state.titleData.hyperlipoidemia) ?
                                    <div className='signs-style' style={{ background: '#fa8c16' }}>脂</div> : null}
                            </div>
                        </div> : <span style={{ color: '#999999', lineHeight: '79px', marginLeft: '20%' }}>{'暂无病人信息~'}</span>}
                    </div>
                </Card>

                <Card style={{ marginTop: 5 }} title={<span><span className='imformation-label-left'></span>绑定设备</span>}>
                    <Row>
                        <Col span={8}>
                            <span><span className='shuld-choose-btn'>*</span>设备厂商：</span>
                            <Select style={{ width: '70%' }} allowClear showSearch placeholder='请选择设备厂商'
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                } onChange={this.changeSelectCompany.bind(this, 'companyID')}
                                value={this.state.companyID}
                                getPopupContainer={triggerNode => triggerNode.parentNode}>
                                {companyMsgOption}
                            </Select>
                        </Col>
                        <Col span={8}>
                            <span><span className='shuld-choose-btn'>*</span>设备类型：</span>
                            <Select style={{ width: '70%' }} allowClear showSearch placeholder='请选择设备类型'
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                } onChange={this.changeSelectDeviceType.bind(this, 'deviceTypeID')}
                                value={this.state.deviceTypeID}
                                getPopupContainer={triggerNode => triggerNode.parentNode}>
                                {equipmentMsgOption}
                            </Select>
                        </Col>
                        <Col span={8}>
                            <span><span className='shuld-choose-btn'>*</span>设备型号：</span>
                            <Select style={{ width: '70%' }} allowClear showSearch placeholder='请选择设备型号'
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                } onChange={Util.handleSelectChange.bind(this, 'deviceModelID')}
                                value={this.state.deviceModelID}
                                getPopupContainer={triggerNode => triggerNode.parentNode}>
                                {equipmentNumMsgOption}
                            </Select>
                        </Col>
                        <Col span={8} style={{ marginTop: 5 }}>
                            <span><span className='shuld-choose-btn'>*</span>设备编码：</span>
                            <Input style={{ width: '70%' }} value={this.state.SN} placeholder='请输入设备编码'
                                onChange={Util.commonInputChange.bind(this, 'SN')} />
                        </Col>
                        <Col span={8} style={{ marginTop: 5 }}>
                            <span><span className='shuld-choose-btn'>*</span>发放机构：</span>
                            {/* <Select placeholder="请选择机构" style={{ width: '70%' }}
                                showSearch allowClear
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                                onChange={Util.handleSelectChange.bind(this, 'hospID')}
                                getPopupContainer={triggerNode => triggerNode.parentNode}>
                                {hospitalOption}
                            </Select> */}
                            <Input style={{ width: '70%' }} value={this.state.userData.hospDesc} placeholder='发放机构' disabled />
                        </Col>
                    </Row>
                </Card>
            </Modal></div>
    }
}

export default Form.create()(ShowInformationModal);